<template>
  <view>
    <my-goods v-for="goods in goodList"
              :key="goods"
              :goods="goods"></my-goods>
  </view>
</template>
<script>
export default ({
  data () {
    return {
      queryList: {
        query: '',	//否	string	关键字
        cid: '',	//否	string	分类id
        pagenum: 1,	//否	number	页码
        pagesize: 10,	//否	number	页容量
      },
      total: '',
      goodList: [],
      // 判断上拉数据是否加载
      isLoadingMore: false

    };
  },
  // 实现当下拉和上拉的时候，要请求后台数据，但不显示loading效果
  onPullDownRefresh () {
    // 下拉刷新把页面设置为1，并把数据清空，重新发送请求
    this.queryList.pagenum = 1
    this.goodList = []
    // 重新发送请求
    this.getGoodList(true)
  },
  onLoad (options) {
    // console.log(options);
    // 因为query不是发送请求的必须文件。所以可能存在为空，，耳后台
    this.queryList.query = options.query || ''
    this.queryList.cid = options.cid || ''
    this.getGoodList()
  },
  // 上拉到底部触发事件
  onReachBottom () {
    // 判断加载数据是否在执行，如果在多次执行的话就不执行下面的
    if (this.isLoadingMore) return
    if (this.goodList.length >= this.total) {
      uni.showToast({
        title: '商品全部显示啦',
        icon: 'none'
      })
      return
    }
    // 当触发到底部的时候，页数++重新请求数据
    this.queryList.pagenum++
    this.getGoodList()
  },
  methods: {
    async getGoodList (isPullDown) {
      // 开启加载数据请求
      this.isLoadingMore = true
      let { message: { total, goods }, meta: { status } } = await uni.$request({
        url: 'goods/search',
        data: this.queryList,
        isPullDown
      })
      if (status === 200) {
        this.total = total
        this.goodList = [...this.goodList, ...goods]
        this.isLoadingMore = false
      }
      // 如果请求数据完毕了就关闭下拉加载数据效果
      if (isPullDown) {
        uni.stopPullDownRefresh()
      }
    }
  }
})
</script>
